<template>
  <div id="picture-add-by-batch-page">
    <h1>批量导入图片</h1>

    <a-form
      :model="formState"
      layout="vertical"
      name="normal_submit"
      class="login-form"
      @finish="submitForm"
      style="width: 50%; margin: 0 auto"
    >
      <a-form-item
        name="searchText"
        label="搜索词"
        :rules="[{ required: true, message: '请输入图片搜索词!' }]"
      >
        <a-input v-model:value="formState.searchText" placeholder="请输入图片搜索词" />
      </a-form-item>

      <a-form-item name="count" label="数量">
        <a-input-number
          v-model:value="formState.count"
          :min="1"
          :max="10"
          placeholder="请输入图片数量, 默认10张"
          :step="2"
          style="width: 200px"
        />
      </a-form-item>

      <a-form-item name="namePrefix" label="名称前缀">
        <a-input
          v-model:value="formState.namePrefix"
          placeholder="请输入图片名称前缀， 默认是图片名"
        ></a-input>
      </a-form-item>

      <a-form-item name="category" label="分类">
        <a-auto-complete
          v-model:value="formState.category"
          :options="tagCategoryOptions?.categoryList"
          placeholder="请输入分类"
        />
      </a-form-item>

      <a-form-item name="tags" label="标签">
        <a-select
          :options="tagCategoryOptions?.tagList"
          mode="tags"
          v-model:value="formState.tags"
          placeholder="请输入标签"
        />
      </a-form-item>

      <a-form-item>
        <a-button
          block
          :disabled="disable"
          type="primary"
          html-type="submit"
          :loading="loading"
          class="login-form-button"
        >
          执行任务
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import {
  listPictureTagCategoryUsingGet,
  uploadPictureByBatchUsingPost,
} from '@/api/pictureController.ts'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'


const router = useRouter()
const loading = ref<boolean>(false)
// 上传方式
// 定义表单
const formState = reactive<API.PictureUploadByBatchRequest>({
  count: 2
})

//
const submitForm = async (values) => {
  loading.value = true
  console.log(values)
  const res = await uploadPictureByBatchUsingPost(values)
  if (res.data.code != 0) {
    return
  }
  loading.value = false
  message.success(`上传成功,共${formState.count}张`)
  router.replace({
    path: '/',
  })
}

// 定义标签option和分类option
const tagCategoryOptions = ref<API.PictureTagCategory>({})
const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data.code != 0) {
    return
  }
  tagCategoryOptions.value.tagList = res.data.data.tagList.map((tag) => {
    return {
      label: tag,
      value: tag,
    }
  })

  tagCategoryOptions.value.categoryList = res.data.data.categoryList.map((category) => {
    return {
      label: category,
      value: category,
    }
  })
}

const disable = computed(() => {
  return !formState.searchText
})

onMounted(() => {
  getTagCategoryOptions()
})
</script>

<style scoped lang="scss">
#picture-add-page {
  width: 65%;
  margin: 0 auto;
}
</style>
